<template>
    <footer>
      <ul class="footerIn">
        <li v-for="(footer,index) in footers"  @click="navClickEvent(footers, index)" :class="[footer.active?activeClass:'']">
            <i class="iconfont" v-bind:class="footer.icon"></i>
        </li>
      </ul>
    </footer>
</template>

<script>
  export default {
    name: 'footer',
    data () {
      return {
        activeClass: 'active',
        footers: [
          {
            active: false,
            icon: 'icon-shequhongse76',
            path: '/null'
          },
          {
            active: true,
            icon: 'icon-shouye',
            path: '/detail?detailId=' + this.$route.query.detailId + '&sponsorsId=' + this.$route.query.sponsorsId
          },
          {
            active: false,
            icon: 'icon-gerenzhongxin',
            path: '/null'
          }
        ]
      }
    },
    methods: {
      navClickEvent: function (footers, index) {
        this.$router.push(this.footers[index].path)
        footers.forEach(function (el) {
          el.active = false
        })
        footers[index].active = true
      }
    }
  }
</script>

<style scoped lang="less">
  @import "//at.alicdn.com/t/font_vp6sjlufjy7am7vi.css";
  footer {
    width: 100%;
    height: 4.9rem;
    background: #fff;
    position: fixed;
    left: 0;
    bottom: 0;
    .footerIn {
      width: 100%;
      height: 4.9rem;
      li {
        width: 33.33%;
        height: 4.9rem;
        line-height: 4.9rem;
        float: left;
        text-align: center;
        .iconfont {
          font-size: 2rem;
          font-style: normal;
          -webkit-font-smoothing: antialiased;
          -webkit-text-stroke-width: 0.2px;
          -moz-osx-font-smoothing: grayscale;
          text-align: center;
        }
        .icon-shequhongse76{
          font-size:1.65rem;
        }
        .icon-gerenzhongxin{
          font-size:1.7rem;
        }
      }
    }
    .active{
      color: #f1ae9b;
    }
  }
</style>
